<template>
  <div class="gesture-display-container">
    <canvas ref="gestureCanvas" class="gesture-display-canvas"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    gesturePoints: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.drawGesture();
    window.addEventListener('resize', this.drawGesture);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.drawGesture);
  },
  watch: {
    gesturePoints: {
      handler() {
        this.drawGesture();
      },
      deep: true
    }
  },
  methods: {
    drawGesture() {
      const canvas = this.$refs.gestureCanvas;
      const ctx = canvas.getContext('2d');

      // 设置画布大小，保持正方形
      const container = this.$refs.gestureCanvas.parentElement;
      const size = Math.min(container.clientWidth, 250);
      canvas.width = size;
      canvas.height = size;

      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      if (this.gesturePoints.length === 0) {
        return; // 如果没有手势密码，直接返回
      }

      // 定义 3x3 点阵的位置
      const points = [];
      const offset = Math.floor(size * 0.16); // 根据画布大小动态计算偏移
      const gap = (size - 2 * offset) / 2;
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          points.push({
            x: offset + col * gap,
            y: offset + row * gap
          });
        }
      }

      // 绘制点阵
      ctx.fillStyle = '#ffffff';
      ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
      ctx.shadowBlur = 8;

      points.forEach(point => {
        ctx.beginPath();
        ctx.arc(point.x, point.y, size * 0.056, 0, Math.PI * 2); // 动态计算点半径
        ctx.fill();
        ctx.stroke();
      });

      // 绘制手势路径
      const pathPoints = this.gesturePoints.map(index => {
        if (index >= 1 && index <= 9) {
          return points[index - 1];
        }
        return null;
      }).filter(point => point !== null);

      if (pathPoints.length > 0) {
        const lineWidth = size * 0.016; // 动态计算线宽
        ctx.strokeStyle = '#3b82f6';
        ctx.lineWidth = lineWidth;
        ctx.lineCap = 'round';
        ctx.shadowColor = 'rgba(59, 130, 246, 0.3)';
        ctx.shadowBlur = lineWidth * 1.5;

        ctx.beginPath();
        ctx.moveTo(pathPoints[0].x, pathPoints[0].y);

        pathPoints.forEach((point, index) => {
          if (index > 0) {
            ctx.lineTo(point.x, point.y);
          }
        });

        ctx.stroke();

        // 高亮显示已连接的点
        pathPoints.forEach(point => {
          ctx.beginPath();
          ctx.arc(point.x, point.y, size * 0.056, 0, Math.PI * 2);
          const gradient = ctx.createRadialGradient(
              point.x, point.y, 0,
              point.x, point.y, size * 0.056
          );
          gradient.addColorStop(0, '#3b82f6');
          gradient.addColorStop(1, '#93c5fd');
          ctx.fillStyle = gradient;
          ctx.fill();
        });

        // 绘制箭头
        for (let i = 1; i < pathPoints.length; i++) {
          this.drawArrow(
              pathPoints[i-1].x, pathPoints[i-1].y,
              pathPoints[i].x, pathPoints[i].y,
              size * 0.035 // 箭头大小，相对于画布大小动态调整
          );
        }
      }
    },
    drawArrow(x1, y1, x2, y2, size) {
      const canvas = this.$refs.gestureCanvas;
      const ctx = canvas.getContext('2d');

      // 计算箭头的方向向量
      const dx = x2 - x1;
      const dy = y2 - y1;
      const length = Math.sqrt(dx * dx + dy * dy);

      // 归一化方向向量
      const nx = dx / length;
      const ny = dy / length;

      // 箭头的两个侧边向量（垂直于方向向量）
      const px = -ny;
      const py = nx;

      // 箭头基部位置
      const baseX = x2 - (size * 0.8) * nx;
      const baseY = y2 - (size * 0.8) * ny;

      // 绘制箭头
      ctx.beginPath();
      ctx.moveTo(x2, y2);
      ctx.lineTo(baseX + size * px, baseY + size * py);
      ctx.lineTo(baseX - size * px, baseY - size * py);
      ctx.closePath();

      // 填充箭头
      ctx.fillStyle = '#3b82f6';
      ctx.fill();

      // 轮廓
      ctx.strokeStyle = '#1e40af';
      ctx.lineWidth = 1;
      ctx.stroke();
    }
  }
}
</script>

<style scoped>
.gesture-display-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.gesture-display-canvas {
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
}
</style>